import React, { PureComponent } from 'react';
// 引入请求
import Axios from 'axios';
// 引入地址
import { webSite } from '../../website';
// 引入样式
import './scss/search.scss';
import { Input, Button, message } from 'antd';
export default class Search extends PureComponent {
  constructor() {
    super()
    this.state = {
      // 输入框内容
      input: '',
      // 获取的数组
      NovelList: []
    }
  }
  componentWillUnmount () {
    // 卸载异步操作设置状态
    this.setState = () => {
      return;
    }
  }
  // input的输入事件
  handleInput = ({ target }) => {
    let { name, value } = target
    // 设置input和state同步
    this.setState({
      [name]: value
    })
  }
  // 搜索框
  searchNovel = () => {
    let { input } = this.state;
    if (!input) {
      message.error({ content: '您必须输入内容', className: 'bulletChatMessage' });
      return;
    }
    setTimeout(message.loading('请稍后.....', 0), 1000);
    Axios.create({
      baseURL: `${webSite}:3003`
    }).post("/getNovel", { novelText: input }).then(err => {
      this.setState({
        NovelList: err.data.novelAll
      })
    }).catch(() => {
      message.error({ content: '网络错误', className: 'bulletChatMessage' });
    })
  }
  // 点击跳转到小说详情页
  goSearch = (list) => {
    this.props.history.push({ pathname: "/novel/details", state: list });
  }
  // 返回主页
  escNovel = () => {
    this.props.history.replace('/novel');
  }
  render () {
    let { NovelList } = this.state;
    return (
      <div className='search'>
        <div className='search_title'>
          <Input placeholder="搜索您想看的电子书" className='search_title_input' value={this.state.input} name='input' onChange={this.handleInput} autoComplete="off" maxLength='20' onPressEnter={this.searchNovel} />
          <Button type='text' onClick={this.escNovel}>取消</Button>
        </div>
        <ul className='search_body'>
          {
            NovelList.length !== 0 ?
              NovelList.map((list, index) => {
                return (
                  <li className='search_body_li' key={list.id} onClick={() => this.goSearch(list)}>
                    <img src={list.novelImg} alt="电子书" />
                    <div className='search_body_li_body'>
                      <h3 dangerouslySetInnerHTML={{ __html: list.novelText }} ></h3>
                      <div className='search_body_li_body_bottom'>
                        <h4 dangerouslySetInnerHTML={{ __html: list.novelAuthor }}></h4>
                      </div>
                      <div dangerouslySetInnerHTML={{ __html: list.novelMedium }} ></div>
                    </div>
                  </li>
                )
              })
              : ''
          }
        </ul>
      </div>
    )
  }
}